<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <!--<title>Bootstrap 实例</title>-->
    <!--&lt;!&ndash; 包含头部信息用于适应不同设备-->
    <!--Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。-->
    <!--为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签&ndash;&gt;-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">-->
    <!--&lt;!&ndash; 包含 bootstrap 样式表 &ndash;&gt;-->
    <!--<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">-->
    <!--&lt;!&ndash;注意jquery放在bootstrap.js上面&ndash;&gt;-->
    <!--<script src="bootstrap/js/jquery-3.2.1.min.js"></script>-->
    <!--<script src="bootstrap/js/bootstrap.min.js"></script>-->

    <link href="Ly-admin-Iframe/css/bootstrap.min.css" rel="stylesheet">
    <link href="Ly-admin-Iframe/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="Ly-admin-Iframe/css/animate.css" rel="stylesheet">
    <link href="Ly-admin-Iframe/css/style.min.css" rel="stylesheet">
    <link href="Ly-admin-Iframe/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <!--时间选择插件-->
    <link rel="stylesheet" href="Ly-admin-Iframe/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
    <!--日期选择插件-->
    <link rel="stylesheet" href="Ly-admin-Iframe/js/bootstrap-datepicker/bootstrap-datepicker3.min.css">
    <script>
        if (document.referrer === ''){
            location='/admin';
        }
    </script>
</head>
<body>

<div class="container-fluid p-t-10">
    <div class="row">
        <div class="col-lg-11">
            <div class="card">
                <div class="card-header"><h4>用户操作界面</h4></div>
                <div class="card-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label class="sr-only">id</label>
                            <input id="uid" class="form-control" type="text" placeholder="请输入用户id">
                        </div>
                        <div class="form-group">
                            <label class="sr-only">用户名</label>
                            <input id="username" class="form-control" type="text" placeholder="请输入用户名">
                        </div>
                        <div class="form-group">
                            <label class="sr-only">起始日期</label>
                            <input id="starttime" class="form-control js-datepicker" type="text" data-date-format="yyyy/mm/dd" placeholder="起始日期">
                        </div>
                        <div class="form-group">
                            <label class="sr-only">截止日期</label>
                            <input id="endtime" class="form-control js-datepicker" type="text" data-date-format="yyyy/mm/dd" placeholder="截止日期">
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" type="button" onclick="query()">
                                <span class="mdi mdi-magnify" aria-hidden="true"></span>查询
                            </button>
                        </div>
                    </form>
                    <div id="toolbar" class="toolbar-btn-action">
                        <button id="btn_add" type="button" class="btn btn-xs btn-primary m-r-5" data-toggle="modal" data-target="#add">
                            <span class="mdi mdi-plus" aria-hidden="true"></span>新增
                        </button>
                        <button id="btn_delete" type="button" class="btn btn-xs btn-danger" onclick="delUsers()">
                            <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
                        </button>
                    </div>
                    <table id="tb_user"></table>
                </div>
            </div>
        </div>
    </div>

</div>

<!--新增模态框-->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">新增用户</h4>
            </div>
            <div class="card-body">
            <div class="form-group">
                <label>用户名</label>
                <input id="add_username" class="form-control" type="text" placeholder="">
            </div>
            <div class="form-group">
                <label>城市</label>
                <input id="add_city" class="form-control" type="text" placeholder="">
            </div>
            <div class="form-group">
                <label>出生日期</label>
                <input id="add_birthday" class="form-control js-datepicker" type="text" data-date-format="yyyy/mm/dd" placeholder="">
            </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="addUser()">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--修改模态框-->
<div class="modal fade" id="mod" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">修改用户</h4>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label>用户名</label>
                    <input id="mod_username" class="form-control" type="text" placeholder="" />
                </div>
                <div class="form-group">
                    <label>城市</label>
                    <input id="mod_city" class="form-control" type="text" placeholder=""/>
                </div>
                <div class="form-group">
                    <label>出生日期</label>
                    <input id="mod_birthday" class="form-control js-datepicker" type="text" data-date-format="yyyy/mm/dd" placeholder=""/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="edit" type="button" class="btn btn-primary">修改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script type="text/javascript" src="Ly-admin-Iframe/js/jquery.min.js"></script>
<script type="text/javascript" src="Ly-admin-Iframe/js/bootstrap.min.js"></script>
<script type="text/javascript" src="Ly-admin-Iframe/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="Ly-admin-Iframe/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="Ly-admin-Iframe/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<!--行内编辑插件-->
<link href="Ly-admin-Iframe/js/x-editable/1.5.1/bootstrap3-editable/css/bootstrap-editable.min.css" rel="stylesheet">
<script type="text/javascript" src="Ly-admin-Iframe/js/x-editable/1.5.1/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script type="text/javascript" src="Ly-admin-Iframe/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>
<script type="text/javascript" src="Ly-admin-Iframe/js/bootstrap-table/extensions/export/bootstrap-table-export.min.js"></script>
<!--时间选择插件-->
<script src="Ly-admin-Iframe/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="Ly-admin-Iframe/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="Ly-admin-Iframe/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="Ly-admin-Iframe/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="Ly-admin-Iframe/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="Ly-admin-Iframe/js/main.min.js"></script>
<!--弹出框插件-->
<script type="text/javascript" src="Ly-admin-Iframe/js/bootbox.min.js"></script>
<script type="text/javascript" src="Ly-admin-Iframe/js/bootbox.locales.min.js"></script>

<script type="text/javascript">
    $('#tb_user').bootstrapTable({
        classes: 'table table-bordered table-hover table-striped',
        url: '/user/list',
        method: 'post',
        contentType: "application/json",
        dataType : 'json',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
        uniqueId: 'id',
        idField: 'id',             // 每行的唯一标识字段
        toolbar: '#toolbar',       // 工具按钮容器
        //clickToSelect: true,     // 是否启用点击选中行
        showColumns: true,         // 是否显示所有的列
        showRefresh: true,         // 是否显示刷新按钮
        //search:true,               //是否显示表格搜索
        showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
        pagination: true,                    // 是否显示分页
        sortOrder: "asc",                    // 排序方式
            queryParams: function(params) {
            //传递到后端为json格式,用map接收，使用@Requestbody注解
            var temp = {
                limit: params.limit,         // 每页数据量
                //offset: params.offset,       // sql语句起始索引
                page: (params.offset / params.limit) + 1,
                sort: params.sort,           // 排序的列名
                sortOrder: params.order,     // 排序方式'asc' 'desc'
                username: $("#username").val(),//用户名
                uid: parseInt($("#uid").val()),//用户id
                starttime: $("#starttime").val(),//开始日期
                endtime: $("#endtime").val() //截止日期
            };
            return temp;
        },                                   // 传递参数
        sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
        pageNumber: 1,                       // 初始化加载第一页，默认第一页
        pageSize: 5,                        // 每页的记录行数
        pageList: [5,10, 25, 50, 100],         // 可供选择的每页的行数
        //search: true,                      // 是否显示表格搜索，此搜索是客户端搜索

        //showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
        //exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

        columns: [{
            checkbox: true    // 是否显示复选框
        }, {
            field: 'id',
            title: 'ID',
            sortable: true    // 是否排序
        }, {
            field: 'name',
            title: '用户名',
            sortable: true
        }, {
            field: 'city',
            title: '城市',
            sortable:true
        }, {
            field: 'birthday',
            title: '生日',
            sortable: true
        },{
                field: 'operate',
                title: '操作',
                formatter: btnGroup,  // 自定义方法
                events: {
                    'click .edit-btn': function (event, value, row, index) {
                        $("#mod_username").val(row.name);
                        $("#mod_city").val(row.city);
                        $("#mod_birthday").val(row.birthday);
                        $("#mod").modal('show');
                        $("#edit").on('click',function () {
                            editUser(row.id);
                        })
                }
            }
        }],
        onLoadSuccess: function(data){
            $("[data-toggle='tooltip']").tooltip();
        }
    });
    // 操作按钮
    function btnGroup ()
    {
        var html =
            '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>';
        return html;
    }
    //增加用户
    function addUser() {
        //输入不能为多个空格,正则表达式
        var format = new RegExp("^[ ]+$");
        var name = $("#add_username").val();
        var city = $("#add_city").val();
        var birthday = $("#add_birthday").val();
        if ((format.test(name)||name==='')||(format.test(city)||city==='')||(format.test(birthday)||birthday==='')){
            bootbox.alert({message: "输入不能为空",size:'small'});
        }else {
            $("#add").modal('hide');
            var data = {
                uName: name,
                uCity: city,
                uBirthday: birthday
            };
            $.ajax({
                url: '/user/add',
                type: 'POST',
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data),
                success: function (result) {
                    if (result.code === '200') {
                        bootbox.alert({message: "用户添加成功", size: 'small'});
                        $('#tb_user').bootstrapTable('refresh', {pageNumber: 1,pageSize: 5});
                    } else {
                        bootbox.alert({message: "操作失败", size: 'small'});
                    }
                }

            })
        }

    }
    // 操作方法 - 编辑
    function editUser(id)
    {
       //输入不能为多个空格,正则表达式
        var format = new RegExp("^[ ]+$");
        var uid = id;
        var name = $("#mod_username").val();
        var city = $("#mod_city").val();
        var birthday = $("#mod_birthday").val();
        if ((format.test(name)||name==='')||(format.test(city)||city==='')||(format.test(birthday)||birthday==='')){
            bootbox.alert({message: "输入不能为空",size:'small'});
        }else {
            $("#mod").modal('hide');
            var data = {
                id: uid,
                name: name,
                city: city,
                birthday: birthday
            };
            $.ajax({
                url: '/user/modify',
                type: 'POST',
                contentType: "application/json",
                dataType: "json",
                data: JSON.stringify(data),
                success: function (result) {
                    if (result.code === '200') {
                        bootbox.alert({message: "修改成功", size: 'small'});
                        $('#tb_user').bootstrapTable('refresh', {pageNumber: 1,pageSize: 5});
                    } else {
                        bootbox.alert({message: "操作失败", size: 'small'});
                    }
                }

            })
        }

    }
    //批量删除
    function delUsers() {
        var rows = $("#tb_user").bootstrapTable('getSelections');
        if (rows.length===0){
            bootbox.alert({message:"请选择要删除的行",size:'small'})
        }else{
            var ids = [];
            for (var i=0;i<rows.length;++i){
                ids.push(rows[i].id);
            }
            bootbox.confirm({
                message: "是否确认删除",
                size: 'small',
                buttons: {
                    confirm: {
                        label: '确认',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: '取消',
                        className: 'btn-danger'
                    }
                },
                callback: function (result) {
                    if (result){
                        $.ajax({
                            url: '/user/remove',
                            type: 'POST',
                            contentType: "application/json",
                            dataType: "json",
                            data: JSON.stringify(ids),
                            success: function (result) {
                                if (result.code === '200') {
                                    bootbox.alert({message: "信息删除成功",size:'small'});
                                    $('#tb_user').bootstrapTable('refresh', {pageNumber: 1,pageSize: 5});
                                } else {
                                    bootbox.alert({message: "操作失败",size:'small'});
                                }
                            }
                        });
                    }else {
                        console.log('取消成功');
                    }

                }
            });
        }

    }
    //动态查询重载
    function query() {
        $('#tb_user').bootstrapTable('refresh', {pageNumber: 1,pageSize: 5});
    }
</script>

</body>
</html>
